<template>
  <div>
    <div class="active_box">
      <window-title title="活动筛选"></window-title>
      <el-form :model="formItem" label-position="left"  class="demo-form-inline" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="活动类型">
              <el-select v-model="formItem.type">
                <el-option
                  v-for="(item,index) in activeType"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="活动状态">
              <el-select v-model="formItem.state">
                <el-option
                  v-for="(item,index) in activeState"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动时间">
              <el-date-picker
                v-model="formItem.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
         <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="活动名称">
                <el-input placeholder="请输入活动名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button class="com-btn" icon="el-icon-search" size="mini" >查询</el-button>
            </el-col>
          </el-row>
      </el-form>
      <!-- tag 标签 -->
       <el-tabs v-model="activeName">
      <el-tab-pane >
        <span slot="label">
          全部列表
          <span class="tab-badge">{{all}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane >
        <span slot="label">
          报名未开始
          <span class="tab-badge">{{no_start}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane >
        <span slot="label">
          报名中
          <span class="tab-badge">{{now_start}}</span>
        </span>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          草稿箱
          <span class="tab-badge">{{drafts_num}}</span>
        </span>
      </el-tab-pane>
    </el-tabs>
    <div>
      <!-- 列表存在数据 的时候 -->
      <div >
        <active-list  :list="list.data"></active-list>
        <div class="page-box">
          <el-pagination
            background
            small
            :current-page="list.current_page"
            :page-size="list.per_page"
            layout="total, prev, pager, next, jumper"
            :total="list.total"
            @current-change="changePage"
          ></el-pagination>
        </div>
      </div>
      <!-- <div class="list-empty" v-else>
        <img src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/7b01bdfe3f80378002f7ca7c4e77ec3.png" alt="">
        <div>暂无任何活动数据</div>
      </div> -->
    </div>
    </div>
  </div>
</template>

<script>
import windowTitle from "../../components/unit/title.vue";
import activeList from "./list-table.vue";

export default {
  components: { windowTitle,activeList },
  data() {
    return {
      activeName: "1",
      all:10,
      no_start : 0,
      now_start : 0,
      drafts_num : 0,
      formItem: {
        type: "全部",
        state: "全部",
        tieme:''
      },
       list: {
        current_page: 1,
        data: [
          {
            cover:require('../../assets/img/brand03.png'),
            type:1,
            name:'团报测试',
            sign_up_start:' 2020-03-14 14:54:43',
            sign_up_end:' 2020-03-14 14:54:43',
            start_time:' 2020-03-14 14:54:43',
            end_time:' 2020-03-14 14:54:43',
            active_limit:'1',
            user_num:'20',
            address:'合肥市未来塔',
            state:2,
          }
        ],
        total:50
      },
      activeType: ["全部", "赛事", "活动", "任务"],
      activeState: ["全部", "未报名", "报名中", "报名结束", "进行中", "已结束"],
      form: {
        type: ""
      }
    };
  },
  methods:{
      //分页
    changePage(e) {
      this.list.current_page = e;
    },
  }
};
</script>

<style scoped>
@import url("../../assets/css/active/activeList.css");
</style>